var messageBoard_page_data = new Vue({
    el: "#messageBoard_page",
    data: function () {
        return {
            data: [],
            data1: [],
            data2: [],
            data3: [],
            data4: [],
            data5: [],
            data1Num: 0,
            data2Num: 0,
            data3Num: 0,
            data4Num: 0,
            data5Num: 0,
            listLength: 0
        }
    },
    created() {
        this.$nextTick(function () {
            var that = this;
            setTimeout(function () {
                // 欢迎弹窗
                that.show();
            }, 10000);
            AV.init({
                appId: 'pLS7RyXgxl8cHOXTVOTjCvbE-gzGzoHsz',
                appKey: 'pLnAGJmxwnwWeqnGiLv54Q6w'
            })
            that.getData();
        })
    },
    mounted() {
        this.$nextTick(function () {
            var that = this;
            //循环弹幕
            $(document).ready(function () {
                setInterval(function () {
                    that.getData();
                }, 10000);
            });
            // 音乐
            $("#audio_btn").click(function () {
                var music = document.getElementById("music");
                if (music.paused) {
                    music.play();
                    $("#music_btn").attr("src", "img/works/play.png");
                } else {
                    music.pause();
                    $("#music_btn").attr("src", "img/works/pause.png");
                }
            });
        })
    },
    methods: {
        getData: function () {
            var that = this;
            var query = new AV.Query('returnMessageSN');
            query.find().then(res => {
                res.forEach(function (e) {
                        e.attributes.color = that.getReandomColor();
                })
                res.shuffle();
                console.log(res)
                if (that.data1.length === 0) {
                    that.data1 = res;
                    setTimeout(function () {
                        $('.d_show.show_1').show();
                        that.init_screen(document.querySelectorAll(".d_show.show_1 div"), 1);
                    }, 100)
                } else if (that.data2.length === 0) {
                    that.data2 = res;
                    setTimeout(function () {
                        $('.d_show.show_2').show();
                        that.init_screen(document.querySelectorAll(".d_show.show_2 div"), 2);
                    }, 100)
                } else if (that.data3.length === 0) {
                    that.data3 = res;
                    setTimeout(function () {
                        $('.d_show.show_3').show();
                        that.init_screen(document.querySelectorAll(".d_show.show_3 div"), 3);
                    }, 100)
                } else if (that.data4.length === 0) {
                    that.data4 = res;
                    setTimeout(function () {
                        $('.d_show.show_4').show();
                        that.init_screen(document.querySelectorAll(".d_show.show_4 div"), 4);
                    }, 100)
                } else if (that.data5.length === 0) {
                    that.data5 = res;
                    setTimeout(function () {
                        $('.d_show.show_5').show();
                        that.init_screen(document.querySelectorAll(".d_show.show_5 div"), 5);
                    }, 100)
                }
                that.data = res;
            }, (err) => {
                console.log(err);
                mui.msg('拉取数据失败，请重新点击');
            })
        },
        // 发射
        send() {
            var that = this;
            var content = $("#reply-write").val();
            if ($.trim(content) == "") {
                alert("亲，请输入你的想说的话！");
                return false;
            }
            var text = $("#reply-write").val();

            var returnMessageSN = AV.Object.extend('returnMessageSN');
            // 新建一个 returnCitySN 对象
            that.returnCitySQL = new returnMessageSN();
            that.returnCitySQL.set('text', text);
            // that.returnCitySQL.set('color', that.getReandomColor());
            that.returnCitySQL.save().then(function (res) {
                // 成功保存之后，执行其他逻辑.
                var div = "<div style='font-size:18px;color:" + that.getReandomColor() + ";'><p>" + text + "</p></div>";
                $("#reply-write").val("");
                $(".d_show").append(div);
                that.init_screen();
            }, function (error) {
                // 异常处理
                console.log('error message: ' + error.message);
            });

        },
        init_screen: function (eleList, i) {
            var that = this;
            var _top = 0;
            var _height = $(window).height();
            eleList.forEach(function (ele, index) {
                $(ele).show();
                var _left = $(window).width() - $(ele).width() + 220 + Math.random() * 100;
                _top += 36;
                if (_top >= _height - 120 - $(ele).height()) {
                    _top = 40;
                }
                $(ele).css({
                    left: _left,
                    top: _top
                });
                var time = 20000;
                if ($(ele).index() % 2 == 0) {
                    time = 24000;
                }
                if ($(ele).index() % 3 == 0) {
                    time = 28000;
                }
                if ($(ele).index() % 4 == 0) {
                    time = 32000;
                }
                if ($(ele).index() % 5 == 0) {
                    time = 36000;
                }
                if ($(ele).index() % 7 == 0) {
                    time = 40000;
                }
                if ($(ele).index() % 8 == 0) {
                    time = 46000;
                }

                $(ele).animate({
                    left: "-" + _left + "px"
                }, time / 1.2, function () {
                    switch (i) {
                        case 1:
                            that.data1Num++;
                            if (that.data1.length === that.data1Num) {
                                that.data1 = [];
                                that.data1Num = 0;
                                $('.d_show.show_1').hide()
                            }
                            break;
                        case 2:
                            that.data2Num++;
                            if (that.data2.length === that.data2Num) {
                                that.data2 = [];
                                that.data2Num = 1;
                                $('.d_show.show_2').hide()
                            }
                            break;
                        case 3:
                            that.data3Num++;
                            if (that.data3.length === that.data3Num) {
                                that.data3 = [];
                                that.data3Num = 0;
                                $('.d_show.show_3').hide()
                            }
                            break;
                        case 4:
                            that.data4Num++;
                            if (that.data4.length === that.data4Num) {
                                that.data4 = [];
                                that.data4Num = 0;
                                $('.d_show.show_4').hide()
                            }
                            break;
                        case 5:
                            that.data5Num++;
                            if (that.data5.length === that.data5Num) {
                                that.data5 = [];
                                that.data5Num = 0;
                                $('.d_show.show_5').hide()
                            }
                            break;
                    }
                });
            })
        },
        hide: function () {
            var that = this;
            document.getElementById('showmeg').style.display = "none";
            setTimeout(function () {
                that.show();
            }, 10000);
        },
        show: function () {
            var that = this;
            if (that.data.length > 0) {
                return;
            }
            document.getElementById('showmeg').style.display = "block";
            $("#showmeg").animate({
                top: '40%'
            }, 1800);
            $("#showmeg").animate({
                top: '20%'
            }, 1800);
            $("#showmeg").animate({
                left: '10%'
            }, 1800);
            setTimeout(function () {
                that.hide();
            }, 5000);

        },
        //随机获取颜色值
        getReandomColor: function () {
            return '#' + (function (h) {
                return new Array(7 - h.length).join("0") + h
            })((Math.random() * 0x1000000 << 0).toString(16))
        }
    }
})